<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="_xsrf" content="{{.xsrf_token}}" />
    <link rel="icon" href="/static/img/favicon.ico">
    <title>AnsbOps | Login</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/static/css/adminlte.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css"  href="/static/plugins/spop/dist/spop.min.css">

    <style>
        .login-page {
            background: url("/static/img/login.jpg") no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .login-box-body, .register-box-body {
            background: #fff;
            padding: 20px;
            border-top: 0;
            color: #666;
        }
        .btn-primary {
            background-color: #3c8dbc;
            border-color: #367fa9;
        }
        .login-box, .register-box {
            width: 360px;
            margin: 7% auto;
        }
        .login-logo, .register-logo {
            font-size: 35px;
            text-align: center;
            margin-bottom: 25px;
            font-weight: 300;
        }
    </style>
</head>
<body class="hold-transition login-page" style="height: auto">
<div class="login-box">
    <div class="login-logo">
        <a href="javascript:;" style="color: white"><b>FengHuang</b>HD</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg">请出入账号密码登录</p>

            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="username" id="username">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="password" id="password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <!-- /.col -->
                <div class="col-sm-12">
                    <button type="submit" class="btn btn-primary form-control" id="sub-login">登录</button>
                </div>
                <!-- /.col -->
            </div>
            <div class="row">
                <!-- /.col -->
                <div class="col-xs-12" style="margin-top: 5px;margin-left: 80px">
                    <h5 id="msg" style="color: red;text-align: center">{{ .err }}</h5>
                </div>
                <!-- /.col -->
            </div>

    </div>
    <!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<script src="/static/plugins/spop/dist/spop.min.js"></script>
<script src="/static/plugins/jquery/jquery.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/adminlte.min.js"></script>
<script src="/static/plugins/crypto-js/crypto-js.js"></script>

<script>
    var ace_key_str = "linkbook1qaz*WSX";
    function AesEncode(plaintTextStr) {

        var key = CryptoJS.enc.Utf8.parse(ace_key_str);
        var encryptedData = CryptoJS.AES.encrypt(plaintTextStr, key, {
            iv: key,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
        encryptedData = encryptedData.ciphertext.toString();
        return encryptedData
    }


    var ajax = $.ajax;
    $.extend({
        ajax: function(url, options) {
            if (typeof url === 'object') {
                options = url;
                url = undefined;
            }
            options = options || {};
            url = options.url;
            var xsrftoken = $('meta[name=_xsrf]').attr('content');
            var headers = options.headers || {};
            var domain = document.domain.replace(/\./ig, '\\.');
            if (!/^(http:|https:).*/.test(url) || eval('/^(http:|https:)\\/\\/(.+\\.)*' + domain + '.*/').test(url)) {
                headers = $.extend(headers, {'X-Xsrftoken':xsrftoken});
            }
            options.headers = headers;
            return ajax(url, options);
        }
    });


    $("#sub-login").click(function () {
        var username = $("#username").val();
        var password = $("#password").val();
        var aes_password = AesEncode(password);
        $.ajax({
            type:"POST",
            url:"/login/",
            data:{"username":username,"password":aes_password,"passwd_key":ace_key_str},
            dataType : "json",
            success:function () {
                window.location.reload()
            },
            error:function () {
                window.location.reload()
            }
        })
    });

    $("#password").keyup(function(event){
        if(event.keyCode == 13){
            var username = $("#username").val();
            var password = $("#password").val();
            var aes_password = AesEncode(password);
            $.ajax({
                type:"POST",
                url:"/login/",
                data:{"username":username,"password":aes_password,"passwd_key":ace_key_str},
                dataType : "json",
                success:function () {
                    window.location.reload()
                },
                error:function () {
                    window.location.reload()
                }
            })

        }
    });

</script>
</body>
</html>
